<template>
	<view class="content">
		<!--房屋详细-->
		<view class="content_1">
			<block v-for="(house, index_house) in houseList">
				<view class="house_view" @click="toDetail(index_house)">
					<image class="house_img" :src="getPath(house.house_image)"></image>
					<view class="house_detail">
						<view class="house_name">{{house.house_name}}</view>
						<view class="house_info">{{house.house_type}}·{{house.house_direction}}·{{house.house_area}}</view>
						<view class="house_info">{{house.house_addr}}</view>
						<view class="house_tips">
							<block v-for="(tips, index_tips) in house.label">
								<view class="tips">{{tips.show_name}}</view>
							</block>
						</view>
						<view class="house_money">¥ {{house.house_money}}</view>
					</view>
				</view>
				<view class="btn_view">
					<view class="btn_box">
						<view class="btn_1" style="background-color: #999999;" @click="cancle(index_house)">取消收藏</view>
						<view class="btn_1" style="background-color: #FFC26D;" @click="toDetail(index_house)">签约租用</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	//导入接口请求文件
	import {
		Request
	} from '../../../utils/request.js';
	//定义getApp对象
	const app = getApp();
	let page = 3
	let seach_number = 3
	export default {
		data() {
			return {
				houseList: [],
			}
		},
		methods: {
			//获取图片路径
			getPath: function(imagePath) {
				return "https://api.yihua.pub" + imagePath
			},
			//上拉加载
			loadMore: function() {
				if (page > this.houseList.length) {
					uni.showToast({
						title: '没有更多数据了',
						icon: 'none',
						position: 'center'
					})
				} else {
					new Request('User_collect/GetUserCollectList').request(
						() => {
							return 'POST'
						},
						() => {
							return {
								openid: app.globalData.openid,
								seach_number: seach_number,
								page: page,
							}
						},
						(res) => {
							page += seach_number
							this.houseList = this.houseList.concat(res.data.data)
							console.log(this.houseList)
							console.log(page)
						}
					)
				}
			},
			//跳转至详细页,带商品id给后台 ？？
			toDetail: function(index) {
				uni.navigateTo({
					url: '/pages/index/detail/detail?id=' + this.houseList[index].house_id
				});
			},
			//取消收藏
			cancle: function(index) {
				new Request('User_collect/CancelCollect').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							openid: app.globalData.openid,
							collect_id: this.houseList[index].collect_id
						}
					},
					(res) => {
						if (res.data.code == '1') {
							uni.navigateBack({
								delta: 1,
								success: (res) => {
									uni.showToast({
										title: '取消收藏成功',
										icon: 'none',
										position: 'center'
									})
								}
							})
						} else {
							uni.showToast({
								title: '取消收藏失败',
								icon: 'none',
								position: 'center'
							})
						}
					}
				)
			}
		},
		//上拉加载,调用loadMore
		onReachBottom() {
			var that = this
			setTimeout(function() {
				that.loadMore()
			}, 300);
		},
		onLoad() {
			page = 3
			seach_number = 3
			new Request('User_collect/GetUserCollectList').request(
				() => {
					return 'POST'
				},
				() => {
					return {
						openid: app.globalData.openid,
						page: 0,
						seach_number: seach_number
					}
				},
				(res) => {
					if (res.data.code == '0') {
						new Request().showToast('暂无收藏列表', 'none', ()=>{
							setTimeout(()=>{
								uni.navigateBack({
								    delta: 1
								});
							},2000);
						});
						
						this.houseList = [];
					} else {
						this.houseList = res.data.data
					}
				}
			)
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}

	/*
		房屋详细样式
	*/
	.content_1 {
		margin-top: 40upx;
		padding-bottom: 150upx;
	}

	.house_view {
		height: 246upx;
		background-color: #FFFFFF;
		border-radius: 15upx;
		padding: 27upx 24upx;
		display: flex;
		align-items: center;
	}

	.house_img {
		width: 304upx;
		height: 246upx;
		background-color: #8E83C7;
		margin-right: 24upx;
	}

	.house_detail {
		height: 258upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.house_name {
		height: 43upx;
		line-height: 43upx;
		font-size: 32upx;
		color: #333333;
	}

	.house_info {
		height: 35upx;
		line-height: 35upx;
		font-size: 26upx;
		color: #999999;
		width: 400upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.house_tips {
		height: 30upx;
		display: flex;
	}

	.tips {
		height: 30upx;
		line-height: 30upx;
		color: #FFFFFF;
		font-size: 20upx;
		background-image: linear-gradient(to right, #87ECC6, #8ED5EE); //颜色渐变效果(从左到右)
		margin-right: 16upx;
		padding: 0upx 20upx;
	}

	.house_money {
		height: 46upx;
		line-height: 46upx;
		font-size: 34upx;
		color: #FFC26D;
	}

	.btn_view {
		height: 100upx;
		background-color: #FFFFFF;
		position: relative;
		margin-bottom: 40upx;
	}

	.btn_box {
		height: 72upx;
		position: absolute;
		top: 0upx;
		right: 10upx;
		display: flex;
	}

	.btn_1 {
		height: 72upx;
		width: 184upx;
		border-radius: 10upx;
		text-align: center;
		line-height: 72upx;
		font-size: 28upx;
		color: #FFFFFF;
		margin-right: 20upx;
	}
</style>
